<template>
  <div>
    <view class="m-item" :id="'message' + num">
      <view class="m-left">
        <image
          class="head_icon"
          :src="message.to_headimgurl"
          v-if="message.userType === 'home'"
        />
      </view>
      <view
        class="m-content"
        :class="[message.userType === 'customer' ? '' : 'm-content__left']"
      >
        <view
          class="m-content-head"
          :class="{ 'm-content-head-left': message.userType === 'home' }"
          v-if="message.userType === 'home'"
        >
          <view
            :class="'m-content-head-' + message.userType"
            class="msg-img"
            v-if="message.message_type === 'img'"
          >
            <image
              :src="message.message"
              :style="{
                width: (message.width || 80) + 'px',
                height: (message.height || 80) + 'px',
              }"
              @click="preview(message.message)"
            />
          </view>
          <view
            :class="'m-content-head-' + message.userType"
            class="msg-img"
            v-if="message.message_type === 3"
          >
            <image
              :src="message.message"
              style="width: 150px; height: 150px; margin-bottom: 6px"
              @click="preview(message.message)"
            />
            <span class="gift-text">{{ $t("礼物") }}</span>
          </view>
          <view
            :class="'m-content-head-' + message.userType"
            v-if="message.message_type === 'text'"
          >
            <block v-for="(item, index) in message.message" :key="index">
              <block>
                <image
                  class="msg-emoji"
                  v-if="item.type === 'emoji'"
                  :src="item.content"
                />
                <text v-if="item.type === 'text'">{{ item.content }}</text>
              </block>
            </block>
          </view>
        </view>
        <view
          class="m-content-head"
          :class="{ 'm-content-head-right': message.userType === 'customer' }"
          v-if="message.userType === 'customer'"
        >
          <view
            :class="'m-content-head-' + message.userType"
            class="msg-img"
            v-if="message.message_type === 'img'"
          >
            <image
              :src="message.message"
              :style="{
                width: message.width + 'px',
                height: message.height + 'px',
              }"
              @click="preview(message.message)"
            />
          </view>
          <view
            :class="'m-content-head-' + message.userType"
            class="msg-img"
            v-if="message.message_type === 3"
          >
            <image
              style="width: 150px; height: 150px; margin-bottom: 6px"
              :src="message.message"
              @click="preview(message.message)"
            />
            <span class="gift-text">{{ $t("礼物") }}</span>
          </view>
          <view
            :class="'m-content-head-' + message.userType"
            v-if="message.message_type === 'text'"
          >
            <block v-for="(item, index) in message.message" :key="index">
              <block>
                <image
                  class="msg-emoji"
                  v-if="item.type === 'emoji'"
                  :src="item.content"
                />
                <text v-if="item.type === 'text'">{{ item.content }}</text>
              </block>
            </block>
          </view>
          <view
            :class="'m-content-head-' + message.userType"
            v-if="message.message_type === 'goods'"
          >
            <view class="goods-float">
              <u-image
                :src="message.message.goodsThumb"
                class="goods-float-thumble"
                width="110"
                height="110"
                border-radius="10"
                @click="
                  $u.route('/pagesC/goods/goodsDetails', {
                    id: message.message.goodsId,
                  })
                "
              ></u-image>
              <view
                class="goods-float-center"
                @click="
                  $u.route('/pagesC/goods/goodsDetails', {
                    id: message.message.goodsId,
                  })
                "
              >
                <p class="goods-float-name">
                  {{ message.message.goodsName }}
                </p>
                <p class="goods-float-price">
                  {{ $t("￥") }}{{ message.message.shopPrice }}
                </p>
              </view>
            </view>
          </view>
		  <view
		    :class="'m-content-head-' + message.userType"
		    v-if="message.message_type === 'orders'"
		  >
		    <view class="goods-float" style="display: block;">
				<view>{{message.message.order_num}}</view>
		      <view style="display: flex;align-items: center;">
				  <u-image
				    :src="message.message.goodsThumb"
				    class="goods-float-thumble"
				    width="110"
				    height="110"
				    border-radius="10"
				    @click="
				      $u.route('/pagesC/order/orderDetails', {
				        order_num: message.message.order_num,
				      })
				    "
				  ></u-image>
				  <view
				    class="goods-float-center"
				    @click="
				      $u.route('/pagesC/order/orderDetails', {
				        order_num: message.message.order_num,
				      })
				    "
				  >
				    <p class="goods-float-name">
				      {{ message.message.goodsName }}
				    </p>
				    <p class="goods-float-price">
				      {{ $t("￥") }}{{ message.message.realPrice }}
				    </p>
				  </view>
			  </view>
		    </view>
		  </view>
        </view>
      </view>
      <view class="m-right">
        <image
          class="head_icon"
          :src="avatar"
          v-if="message.userType == 'customer'"
        />
      </view>
    </view>
  </div>
</template>

<script>
export default {
  props: ["message", "num", "avatar"],

  data() {
    return {
      from_headimgurl: this.message.from_headimgurl,
    };
  },

  onLoad() {},

  methods: {
    preview(img) {
      uni.previewImage({
        current: 0,
        urls: [img],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.m-item {
  display: flex;
  flex-direction: row;
  padding-top: 40upx;
}
.m-left {
  display: flex;
  width: 120upx;
  justify-content: center;
  align-items: flex-start;
}
.m-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  font-size: 28upx;
  color: #333;
  word-break: break-all;
}

.m-content image {
  max-width: 400rpx;
}
.m-right {
  display: flex;
  width: 120upx;
  justify-content: center;
  align-items: flex-start;
}
.head_icon {
  width: 80upx;
  height: 80upx;
  border-radius: 50%;
}
.m-content-head {
  position: relative;
}
.m-content-head-right {
  display: flex;
  justify-content: flex-end;
}
.m-content-head-home {
  position: relative;
  text-align: left;
  background: #fff;
  border-radius: 16upx;
  padding: 20upx;
  color: #333;
}
.m-content-head-home:before {
  position: absolute;
  left: -26upx;
  top: 26upx;
  width: 0;
  height: 0;
  border: 15upx solid transparent;
  border-right: 15upx solid #fff;
  content: " ";
}
.m-content-head-customer {
  background: #fff;
  border-radius: 16upx;
  font-size: 28upx;
  color: #333;
  padding: 20upx;
  text-align: left;
}

.m-content__left {
  flex: inherit;
  max-width: 510upx;
}

.gift-text {
  display: block;
  margin-bottom: 20upx;
  text-align: center;
  font-size: 24upx;
  color: #f69a30;
}

.m-content-head-customer:after {
  position: absolute;
  top: 26upx;
  right: -26upx;
  width: 0;
  height: 0;
  border: 15upx solid transparent;
  border-left: 15upx solid #fff;
  content: " ";
}

.msg-emoji {
  position: relative;
  top: -2upx;
  width: 50upx;
  height: 50upx;
  vertical-align: middle;
}

.msg-img {
  position: relative;
  padding: 0 0;
  background: transparent !important;
  border-radius: none;

  &::after,
  &::before {
    display: none;
  }

  image {
    display: block;
    position: relative;
    margin-bottom: 20upx;
    border-radius: 8upx;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }
}
.goods-float {
  background-color: #fff;
  border-radius: 14rpx;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  &-thumble {
    flex-shrink: 0;
    margin-right: 10rpx;
  }

  &-sendBtn {
    align-self: flex-end;
  }

  &-close {
    position: absolute;
    right: 40rpx;
    top: 10rpx;
  }

  &-name {
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333;
  }

  &-center {
    // width:380rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  &-price {
    color: #ff6262;
  }
}
</style>
